<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<select name="" v-model='type'>
				<option value="A" v-if='type=="A"'>A</option>
				<option value="B" v-if='type=="B"'>B</option>
				<option value="C" v-if='type=="C"'>C</option>
			</select>
			<input type="text" v-model='num' />
			<input type="text" v-model='carIDs' />
			<p>{{carID}}</p>
			<table border="" cellspacing="" cellpadding="">
				<tr><th>Header</th></tr>
				<tr v-for='item in List' v-bind:class="{ 'active': isExsit(item)}" >
					<td v-text='item'></td>
					<td></td>
				</tr>
			</table>
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#test',
				data:{
					type:'A',
					num:'',
					List:['A1','A2','C4','S1','C2','B6','B4'],
					carIDs:'A'
				},
				mounted:function(){
					
				},
				computed:{
					carID:function(){
						console.log('aa')
						return this.type + this.num						 
					}
				},
				methods:{
					isExsit:function(item){
						if(this.num == ''){
							return false
						}
						var inputs = this.type + this.num
						if(item.indexOf(inputs) != -1){
							return true
						}
						return false
					}
				}
			})
			var ss = ['a','b','b','s','s','ss','asdas']
			console.log($('tr td:last-child'))
			for(var i=0;i<ss.length;i++){
				$($('tr td:last-child')[i]).text(ss[i])
			}
			
		</script>
	</body>
</html>
